<!DOCTYPE html>
<html>

<head>
    <title>编辑器</title>
    <meta charset="UTF-8">
    <script src="node_modules/detect-process/dist/detectProcess.js"></script>
    <script>
        const PROCESS_CONTEXT = detectProcess.getName();
        // Only electron menu - if env is electron
        if (PROCESS_CONTEXT === 'electron') {
            window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.js');
            window.WebMessage = require('./scripts/html-web-message.js');
        }
        // else {
        //     document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"><\/script>');
        // }
    </script>

    <!-- We use uikit and the uikit components: notify, htmleditor
          -- The htmleditor is a modification and is loaded later ... -->

    <link rel="stylesheet" href="node_modules/uikit/dist/css/uikit.css" />
    <link rel="stylesheet" href="node_modules/uikit/dist/css/components/notify.css" />
    <link rel="stylesheet" href="scripts/htmleditor.css">

    <script src="node_modules/uikit/dist/js/uikit.js"></script>
    <script src="node_modules/uikit/dist/js/components/notify.js"></script>

    <link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">

    <script src="node_modules/codemirror/lib/codemirror.js"></script>
    <script src="node_modules/codemirror/mode/markdown/markdown.js"></script>
    <script src="node_modules/codemirror/addon/mode/overlay.js"></script>
    <script src="node_modules/codemirror/mode/xml/xml.js"></script>
    <script src="node_modules/codemirror/mode/gfm/gfm.js"></script>

    <script src="node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
            tex2jax: {
            preview: "none",
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            processEscapes: true
            },
            messageStyle: "none"

            });
        </script>

    <link rel="stylesheet" href="node_modules/highlightjs/styles/default.css">

    <script src="node_modules/markdown-table-template/dist/mdtable.js"></script>

    <script src="node_modules/markdown-it-embed-mathjax-highlight/dist/markdown-it-embed-mathjax-highlight.js"></script>
    <script src="node_modules/highlightjs/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>markdownItEmbedMathjaxHighlight.options.html = true;</script>
    <script>marked = markdownItEmbedMathjaxHighlight;</script>

    <script src="scripts/htmleditor.js"></script>
    <!-- <script src="scripts/store.js"></script> -->
    <!-- <script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script> -->

    <!-- Highlight.js Note: Can not make it work through npm -->
    <script>
        // require('electron').ipcRenderer.on('ping', (event, message) => {
        //   console.log(message) // Prints 'whoooooooh!'
        // })
        // const { remote,ipcRenderer } = require('electron');

        // File browsing
        if (PROCESS_CONTEXT === 'electron') {
            document.write('<script type="text/javascript" src="scripts/editorjs.js"><\/script>');
        }
        //   else {
        //       document.write('<script type="text/javascript" src="scripts/web.js"><\/script>');
        //   }
    </script>
</head>

<body>
    <view style="width:100%;">
        <div style="display: flex;padding: 10px;">
            <label style="width:60px;justify-content: center;align-items: center;line-height: 30px;"
                for="titleipt">标题：</label>
            <input placeholder="在这里输入标题" style="flex:1;   line-height: 25px;" id="titleipt" type="text"></input>
        </div>
    </view>
    <div id="file-modal" class="uk-modal">
        <div class="uk-modal-dialog file-modal">
            <a class="uk-modal-close uk-close"></a>
        </div>
    </div>

    <div id="image-modal" class="uk-modal">
        <div class="uk-modal-dialog image-modal">
            <a class="uk-modal-close uk-close"></a>
        </div>
    </div>

    <div id="video-modal" class="uk-modal">
        <div class="uk-modal-dialog video-modal">
            <a class="uk-modal-close uk-close"></a>
        </div>
    </div>

    <div id="table-modal" class="uk-modal">
        <div class="uk-modal-dialog">
            <a class="uk-modal-close uk-close"></a>
            <form class="uk-form table-form">
                <fieldset data-uk-margin>
                    <legend>Table</legend>
                    <input type="text" class="table-rows" placeholder="Rows">
                    <input type="text" class="table-cols" placeholder="Columns">
                    <button class="uk-button">Send</button>
                </fieldset>
            </form>
        </div>
    </div>
    <span class="markdown">
        <textarea data-uk-htmleditor="{
      mode:'split', 
      maxsplitsize:800, 
      markdown:true, 
      lblPreview: 'Preview', 
      lblCodeview: 'Markdown'
      }"></textarea>
    </span>
    <view style="position: fixed;bottom: 0;padding:10px;width:100%;">
        <div style="display: flex;padding: 0 10px;">
            <label style="width:60px;justify-content: center;align-items: center;line-height: 30px;"
                for="tagsipt">标签：</label>
            <div></div>
            <input placeholder="标签,标签" style="margin-right: 10px;flex:1;line-height: 25px;" id="tagsipt"
                type="text"></input>
        </div>
        <div style="display: flex;padding: 10px;">
            <label style="width:60px;justify-content: center;align-items: center;line-height: 30px;"></label>
            <input type="button" value="保存"
                style="/* flex:1; *//* line-height: 55px; */width: 100px;/* height: 30px; */font-size: 15px;/* padding: 10px; */height: 35px;background-color: cadetblue;"
                id="savebtn">
            <input type="button" value="发布"
                style="/* flex:1; *//* line-height: 55px; */width: 100px;/* height: 30px; */font-size: 15px;/* padding: 10px; */height: 35px;margin-left: 10px;background-color: lightgrey;"
                id="publishbtn">
            <input type="button" value="发布+"
                style="/* flex:1; *//* line-height: 55px; */width: 100px;/* height: 30px; */font-size: 15px;/* padding: 10px; */height: 35px;margin-left: 10px;background-color: lightgrey;"
                id="multipublishbtn">
            <input onclick="javascript:location.reload();" type="button" value="刷新"
                style="/* flex:1; *//* line-height: 55px; */width: 100px;/* height: 30px; */font-size: 15px;/* padding: 10px; */height: 35px;margin-left: 10px;background-color: lightgoldenrodyellow;">
        </div>
    </view>

</body>

</html>